<!-- 体重分析 -->
<template>
<div class="container">
    <div class="tabs">
        <span :class="{active:chooseWeightFlag}" @click="checkWeight">体重分析</span>
        <span :class="{active:!chooseWeightFlag}" @click="checkTrend">趋势分析</span>
    </div>
    <!-- 体重/BMI -->
    <div class="weight" v-show="chooseWeightFlag">
        <div class="round" :class="{'orgColor': orgColor, 'redColor': redColor, 'greColor': greColor}">
            <div style="font-size:1.5rem;font-weight: bold;">{{ weight }}</div>
            <div style="padding: 0.1875rem 0;font-size: 0.625rem;">KG</div>
            <div style="font-size: 0.625rem;">最新体重</div>
        </div>
        <div style="text-align: center;padding: 1.5rem 0 0.625rem;">
            比上次{{weight-lastWeight>0?'重':'轻'}}了{{weight-lastWeight>0?(weight-lastWeight).toFixed(2):(lastWeight-weight).toFixed(2)}} KG，
            比初始体重{{weight-firstWeight>0?'重':'轻'}}了{{weight-firstWeight>0?(weight-firstWeight).toFixed(2):(firstWeight-weight).toFixed(2)}} KG
        </div>
        <div style="text-align: center;font-size: 0.625rem;">（最佳体重范围：{{(18.5*height*height/10000).toFixed(2)}} KG ~ {{(23.9*height*height/10000).toFixed(2)}} KG ）</div>
        <div style="padding: 2.5rem 0 1rem;">BMI</div>
        <div>
            <van-progress :percentage="bmiRes.per" :pivot-text="bmi+''" :pivot-color="bmiRes.color" :color="bmiRes.lineColor" />
            <ul class="process_text">
                <!-- <li>13.1</li> -->
                <li>消瘦</li>
                <li>18.5</li>
                <li>标准</li>
                <li>23.9</li>
                <li>超重</li>
                <!-- <li>29.3</li> -->
            </ul>
        </div>
        <div class="bmi_res">根据计算结果，你的身材体态属性 <span :style="{fontWeight:'bold',color:bmiRes.color}">{{bmiRes.text}}</span></div>
    </div>
    <!-- 趋势图 -->
    <div class="trendChart" v-show="!chooseWeightFlag" style="padding-top: 1.875rem;">
        <div id="weightTrendChart" style="width: 23.4375rem;height:25rem;"></div>
    </div>
    <!-- 按钮 -->
    <div class="btn" @click="recordWeight">记录体重</div>
</div>
</template>

<script>
import * as echarts from 'echarts';
import {
    apiRequest
} from '../../assets/js/axios_api';

export default {
    metaInfo() {
        return {
            title: '体重分析'
        }
    },
    name: 'AnalyseWeight',
    data() {
        return {
            weight: '',
            height: '',
            bmi: '',
            firstWeight: '',
            lastWeight: '',
            userInfo: {},
            bmiRes: {
                text: '',
                color: '',
                per: 0
            },
            chooseWeightFlag: true,
            orangeLinearColor: 'linear-gradient(to right, #fee6d9, #f48d59)',
            redLinearColor: 'linear-gradient(to right, #f9cbcb, #c91010)',
            greenLinearColor: 'linear-gradient(to right, #e5f0db, #69b129)',
            orgColor: false,
            redColor: false,
            greColor: true,
            dateArr: [], //趋势图横坐标日期
            weightsArr: [], //体重数组
        }
    },
    components: {},

    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.weight = this.userInfo.weight;
        this.height = this.userInfo.height;
        this.bmi = this.userInfo.bmi;
        this.bmiRes.per = (this.bmi - 13.1) / (29.3 - 13.1) * 100;
        if (this.bmi < 18.5) {
            this.bmiRes.text = '消瘦'
            this.bmiRes.color = '#f48d59'
            this.bmiRes.lineColor = this.orangeLinearColor
            this.orgColor = true;
            this.redColor = false;
            this.greColor = false;
        } else if (this.bmi > 23.9) {
            this.bmiRes.color = '#c91010'
            this.bmiRes.text = '超重'
            this.bmiRes.lineColor = this.redLinearColor
            this.orgColor = false;
            this.redColor = true;
            this.greColor = false;
        } else {
            this.bmiRes.text = '标准'
            this.bmiRes.color = '#69b129'
            this.bmiRes.lineColor = this.greenLinearColor
            this.orgColor = false;
            this.redColor = false;
            this.greColor = true;
        }
        this.getWeightList()
    },
    methods: {
        getWeightList() {
            let queryParam = {
                cusId: this.userInfo.cusId,
            }
            apiRequest(this, 'hmweightrecord/page', queryParam, resData => {
                if (resData.list.length > 1) {
                    this.lastWeight = resData.list[1].weight;
                } else {
                    this.lastWeight = resData.list[0].weight;
                }
                this.firstWeight = resData.oldWeight;
                resData.list.forEach(element => {
                    this.dateArr.unshift(element.updateDate.split(' ')[0]);
                    this.weightsArr.unshift(element.weight);
                });
                this.initEcharts() //初始化折线图
            }, 'get')
        },
        checkWeight() {
            this.chooseWeightFlag = true;
        },
        checkTrend() {
            this.chooseWeightFlag = false;
        },
        recordWeight() {
            this.$router.push('/recweight');
        },
        initEcharts() {
            // 折线图配置
            let myChart = echarts.init(document.getElementById('weightTrendChart'));
            let option = {
                // 配置主题色
                color: [
                    '#639339'
                ],
                title: {
                    text: "本周体重走势图",
                    left: "center",
                    top: "top",
                    textStyle: {
                        fontSize: 14,
                        fontWeight: 'normal'
                    }
                },
                // X轴配置
                xAxis: {
                    data: this.dateArr,
                    offset: 4,
                    name: "日期(月/日)",
                    nameLocation: "middle",
                    nameTextStyle: {
                        fontWeight: 'bold',
                        lineHeight: 70,
                        color: '#cbe4b4'
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        rotate: 50
                    }
                },
                // Y轴配置
                yAxis: {
                    type: 'value',
                    scale: true,
                    name: "体重(KG)",
                    nameLocation: "end",
                    nameTextStyle: {
                        fontWeight: 'bold',
                        color: '#cbe4b4'
                    },
                    axisLabel: {
                        show: false
                    },
                    axisPointer: {
                        show: true
                    }
                },
                // 数据点
                series: [{
                    data: this.weightsArr,
                    type: 'line',
                    smooth: true, //平滑折线图，false即可取消平滑
                    symbol: "circle",
                    symbolSize: 8,
                    label: {
                        show: true,
                        position: "top",
                        distance: 4
                    }
                }]
            };
            setTimeout(() => {
                myChart.setOption(option);
            }, 2000);
        },
    }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/common.less';

.container {
    .tabs {
        padding: 1rem;

        span {
            display: inline-block;
            width: 49%;
            text-align: center;
            height: 2.5rem;
            line-height: 2.5rem;

            &.active {
                color: @font-color;
                border-bottom: 0.1875rem solid @font-color;
            }

            &:first-child {
                border-right: 0.0625rem solid #ddd;
            }
        }
    }

    .weight {
        background-color: #fff;
        box-shadow: 0.0625rem 0.0625rem 0.625rem 0.0625rem rgba(158, 212, 145, 0.4);
        border-radius: 0.625rem;
        margin: 2rem 1rem;
        padding: 1rem;

        .round {
            width: 6.25rem;
            height: 5rem;
            border-radius: 3.75rem;
            text-align: center;
            margin: 0 auto;
            padding-top: 1.25rem;
            color: #fff;

            &.orgColor {
                background: linear-gradient(to top, #fee6d9, #f48d59);
            }

            &.redColor {
                background: linear-gradient(to top, #f9cbcb, #c91010);
            }

            &.greColor {
                background: linear-gradient(to top, @bg-color, @img-color);

            }
        }

        .process_text {
            li {
                float: left;
                width: 20%;
                padding: 0.875rem 0;
                font-size: 0.625rem;
            }

            overflow: hidden;
        }

        .bmi_res {
            width: 80%;
            margin: 0.625rem auto;
            text-align: center;
            background: linear-gradient(to right, @light-color, @bg-color);
            font-size: 0.625rem;
            padding: 0.5rem;
            border-radius: 1.25rem;
            opacity: 0.7;
        }
    }

    .btn {
        text-align: center;
        background-color: @btn-color;
        position: absolute;
        bottom: 5rem;
        left: 1.875rem;
        right: 1.875rem;
        padding: 0.875rem 0;
        color: #fff;
        border-radius: 2.5rem;
    }
}
</style>
